<template>
  <el-dialog :title="!dataForm.id ? $t('Common.Add') : $t('Common.Edit')" :close-on-click-modal="false" :visible.sync="visible">
    <div>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
        <el-form-item label="类型" prop="fatherId">
          <el-radio v-model="menuType" :label="1">大分类</el-radio>
          <el-radio v-model="menuType" :label="2">小分类</el-radio>
        </el-form-item>
        <el-form-item label="菜单" prop="fatherId" v-show="menuType == 2">
          <el-select v-model="dataForm.fatherId" placeholder="请选择上级菜单">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-col :span="22">
            <el-popover ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover">
              <div class="mod-menu__icon-list">
                <el-button v-for="(item, index) in iconList" :key="index" @click="iconActiveHandle(item)" :class="{ 'is-active': item === dataForm.icon }">
                  <icon-svg :name="item"></icon-svg>
                </el-button>
              </div>
            </el-popover>
            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="名称" prop="name"><el-input v-model="dataForm.name" placeholder="名称"></el-input></el-form-item>
        <el-form-item label="排序" prop="sort"><el-input-number v-model="dataForm.sort" :min="0" label="排序"></el-input-number></el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio v-model="dataForm.state" :label="1">启用</el-radio>
          <el-radio v-model="dataForm.state" :label="0">禁用</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import Icon from '@/icons';
export default {
  data() {
    return {
      options: [],
      visible: false,
      menuType: 1,
      dataForm: {
        id: 0,
        sysUserId: '',
        fatherId: '',
        icon: '',
        name: '',
        sort: 0,
        state: 1
      },
      iconList: [],
      dataRule: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        state: [{ required: true, message: '状态（0禁用1启用）不能为空', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.iconList = Icon.getNameList();
  },
  methods: {
    // 图标选中
    iconActiveHandle(iconName) {
      this.dataForm.icon = iconName;
    },
    menu() {
      this.$http({
        url: this.$http.adornUrl(`/hotel/thotelsmstemplatemenu/list`),
        method: 'get',
        params: this.$http.adornParams({
          page: 0,
          limit: 999,
          fatherId: 0
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.options = data.page.records;
        }
      });
    },
    init(id) {
      this.menu();
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/hotel/thotelsmstemplatemenu/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.sysUserId = data.tHotelSmsTemplateMenu.sysUserId;
              if (data.tHotelSmsTemplateMenu.fatherId == 0) {
                this.menuType = 1;
              } else {
                this.menuType = 2;
              }
              this.dataForm.fatherId = data.tHotelSmsTemplateMenu.fatherId;
              this.dataForm.icon = data.tHotelSmsTemplateMenu.icon;
              this.dataForm.name = data.tHotelSmsTemplateMenu.name;
              this.dataForm.sort = data.tHotelSmsTemplateMenu.sort;
              this.dataForm.state = data.tHotelSmsTemplateMenu.state;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          var menuType = this.menuType;
          if (menuType == 1) {
            this.dataForm.fatherId = 0;
          }
          this.$http({
            url: this.$http.adornUrl(`/hotel/thotelsmstemplatemenu/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              sysUserId: this.dataForm.sysUserId,
              fatherId: this.dataForm.fatherId,
              icon: this.dataForm.icon,
              name: this.dataForm.name,
              sort: this.dataForm.sort,
              state: this.dataForm.state
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit('refreshDataList');
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        max-width: 370px;
    }
    &__icon-list {
        max-height: 180px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
